<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form class="permission-form" :form="form">
      <a-row align="middle">
        <a-col :span="12">
          <a-form-item>
            <a-input v-decorator="['id', { initialValue: mdl.id }]" hidden />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类型" hasFeedback>
            <a-select v-decorator="['type', { initialValue: mdl.type }]" style="width: 250px" @change="handleChange">
              <a-select-option value="0"> 父级菜单 </a-select-option>
              <a-select-option value="1"> 子级菜单</a-select-option>
              <a-select-option value="2"> 权限 </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称" hasFeedback>
            <a-input
              :rows="5"
              v-if="typed != 2"
              placeholder="请输入名称(角色管理)"
              v-decorator="[
                'name',
                { initialValue: mdl.name },
                { rules: [{ required: true, message: '名称不能为空' }] }
              ]"
            />
            <a-input
              :rows="5"
              v-else
              placeholder="请输入名称(角色查询)"
              v-decorator="[
                'name',
                { initialValue: mdl.name },
                { rules: [{ required: true, message: '名称不能为空' }] }
              ]"
            />
          </a-form-item>
          <a-form-item v-if="typed != 2" :labelCol="labelCol" :wrapperCol="wrapperCol" label="菜单标记" hasFeedback>
            <a-input
              :rows="5"
              placeholder="请输入菜单标记(dashboard)"
              v-decorator="[
                'code',
                { initialValue: mdl.code },
                { rules: [{ required: true, message: '菜单标记不能为空(dashboard)' }] }
              ]"
            />
          </a-form-item>
          <a-form-item
            v-else
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="权限标记"
            hasFeedback
            validateStatus="success"
          >
            <a-input
              :rows="5"
              placeholder="请输入权限标记(login:test)"
              v-decorator="[
                'code',
                { initialValue: mdl.code },
                { rules: [{ required: true, message: '权限标记不能为空(login:test)' }] }
              ]"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述" hasFeedback>
            <a-textarea :rows="5" v-decorator="['remarks', { initialValue: mdl.remarks }]" placeholder="请输入描述" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"> </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="父级菜单"
            hasFeedback
            validateStatus="success"
            v-show="typed != 0"
          >
            <a-select v-decorator="['parentId', { initialValue: mdl.parentId }]" placeholder="请选择父级菜单">
              <a-select-option v-for="item in menutype" :key="item.value" :value="item.value">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item v-show="typed != 2" :labelCol="labelCol" :wrapperCol="wrapperCol" label="路由路径" hasFeedback>
            <a-input
              :rows="5"
              placeholder="路由路径:other/RoleList"
              v-decorator="[
                'path',
                { initialValue: mdl.path },
                { rules: [{ required: true, message: '路由路径不能为空' }] }
              ]"
            />
          </a-form-item>

          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序" hasFeedback>
            <a-input :rows="5" placeholder="请输入排序" v-decorator="['sort', { initialValue: mdl.sort }]" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="icon" hasFeedback>
            <a-select
              size="large"
              placeholder="请选择图标"
              v-decorator="['icon', { initialValue: mdl.icon }]"
              style="width: 250px"
              @change="handle"
            >
              <a-select-option
                v-if="iconsList.length > 0"
                v-for="i in iconsList"
                :key="i"
              ><a-icon
                :type="i"
                style="font-size: 18px"
              /></a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
// import pick from 'lodash.pick'
import icons from '@/components/IconSelector/icons.js'
export default {
  name: 'RoleModal',
  data() {
    return {
      mdl: {
        id: undefined,
        code: undefined,
        icon: undefined,
        path: undefined,
        remarks: undefined,
        sort: undefined,
        type: '0',
        name: undefined,
        parentId: undefined
      },
      icons,
      iconsList: [],
      RolesLists: [],
      title: '新增角色',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      // mdl: {
      //   actions: [] // 初始化为默认选中的值
      // },

      form: this.$form.createForm(this),
      permissions: [],
      typed: 0, // 用来保存type字段的值
      menutype: []
    }
  },
  created() {
    this.iconsList = [...new Set(this.icons.reduce((acc, category) => acc.concat(category.icons), []))]

    // console.log(this.iconsList)
  },
  mounted() {
    this.getoaramtMenu(this.type)
    // console.log('mounted')
  },
  computed: {
    initialMenuValue() {
      return this.menutype.length > 0 ? this.menutype[0].value : undefined
    }
  },
  watch: {
    'mdl.type': function (newVal, oldVal) {
      // console.log('变化', newVal, oldVal)
      this.typed = newVal
    }
  },
  methods: {
    handle(value) {
      console.log(`Selected: ${value}`)
    },
    getoaramtMenu(e) {
      const menuParams = {
        id: '',
        createTime: '',
        remarks: '',
        type: e - 1,
        parentId: '',
        name: '',
        englishName: '',
        path: '',
        code: '',
        outerChain: 0,
        icon: '',
        sort: 0,
        children: [
          {
            id: '',
            createTime: '',
            remarks: '',
            type: 0,
            parentId: '',
            name: '',
            englishName: '',
            path: '',
            code: '',
            outerChain: 0,
            icon: '',
            sort: 0,
            children: [],
            tree: false
          }
        ],
        tree: false
      }
      this.$http.post('/sysPermission/getadd', menuParams).then((res) => {
        if (res.code === 200) {
          // console.log('下拉', res)
          this.menutype = res.result.map((item) => {
            return { value: item.id, name: item.name }
          })
        }
      })
    },
    handleChange(e) {
      console.log('选择框改变', e)
      console.log(this.mdl.type)
      // this.form.setFieldsValue({ type: e })
      this.typed = e
      this.getoaramtMenu(e)
    },
    // 验证状态的动态显示
    validateStatus(fieldName) {
      const { getFieldError, isFieldTouched } = this.form
      if (isFieldTouched(fieldName) && getFieldError(fieldName)) {
        return 'error'
      }
      return 'success'
    },
    add() {
      console.log('add')
      this.visible = true
      this.title = '新增权限或菜单'
      this.mdl.type = '0'

      // this.form.resetFields()

      // this.form.resetFields()
      // this.$nextTick(() => {
      //   setTimeout(() => {
      //     this.form.setFieldsValue({
      //       id: undefined,
      //       code: undefined,
      //       icon: undefined,
      //       path: undefined,
      //       remarks: undefined,
      //       sort: undefined,
      //       type: '0',
      //       name: undefined,
      //       parentId: undefined
      //     })
      //   })
      // })
      //  console.log('随机',this.form);

      // this.form.validateFields((values) => {
      //   console.log('表单数据', values) // 输出表单数据
      // })
    },
    watch(record) {
      console.log('watch', record)
      this.title = '查看角色'
    },
    edit(record) {
      // this.mdl = Object.assign({}, record)
      // this.form.resetFields()
      this.mdl = { ...record }

      console.log('数据', this.mdl)
      this.title = '编辑菜单或权限'

      this.typed = this.mdl.type
      console.log('leixin', this.mdl.type)

      this.getoaramtMenu(this.mdl.type)

      // this.$nextTick(() => {
      //   setTimeout(() => {
      //     this.form.setFieldsValue(
      //       pick(this.mdl, ['id', 'code', 'icon', 'path', 'remarks', 'sort', 'name', 'parentId'])
      //     ) // loadsh的pick方法
      //     this.form.setFieldsValue(pick(this.mdl.type.toString(), 'type'))
      //   })
      // })
      console.log('选择', this.form.getFieldValue('type'))

      this.$nextTick(() => {
        setTimeout(() => {
          this.form.setFieldsValue({
            id: this.mdl.id,
            code: this.mdl.code,
            icon: this.mdl.icon,
            path: this.mdl.path,
            remarks: this.mdl.remarks,
            sort: this.mdl.sort,
            type: this.mdl.type.toString(),
            name: this.mdl.name,
            parentId: this.typed === 0 ? '' : this.mdl.parentId?.toString()
          })
        })
      })
      this.visible = true
    },
    close() {
      // this.$emit('close')
      this.$nextTick(() => {
        setTimeout(() => {
          this.form.setFieldsValue({
            id: undefined,
            code: undefined,
            icon: undefined,
            path: undefined,
            remarks: undefined,
            sort: undefined,
            type: '0',
            name: undefined,
            parentId: undefined
          })
        }, 200)
      })
      this.visible = false
    },
    handleOk() {
      // // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          console.log('form values', values)
          // console.log(this)
          if (values.id > 0) {
            console.log('修改')
            const tabledate = this.$removeSpacesFromObject({
              ...values,
              parentId: values.type === '0' ? '' : values.parentId
            })
            this.$http.put('/sysPermission/update', tabledate).then((res) => {
              console.log('res', res)
              if (res.code === 200) {
                this.$message.success('修改成功')

                this.$emit('ok')
              }
            })
          } else {
            const tabledate = this.$removeSpacesFromObject(values)
            console.log('数据', tabledate)

            this.$http.post('/sysPermission/insert', tabledate).then((res) => {
              console.log('res', res)
              if (res.code === 200) {
                this.$message.success('保存成功')
                this.$emit('ok')
              } else {
                this.$message.error(res.message)
              }
            })
          }
        }
      })
    },
    handleCancel() {
      this.close()
    },

    del(e) {
      console.log('删除', e)
    },
    disable() {}
  }
}
</script>

<style scoped></style>
